<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" />
          <div class="userinfo">
            <p class="name">{{ login.userName }}</p>
            <p class="access">{{ login.userPermission }}</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登陆时间：<span>{{ login.loginTime }}</span></p>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <!--图表 这里的数据列表-->
      <el-card shadow="hover" style="height: 522px;">
        <el-table :data="tableData">
          <el-table-column show-overflow-tooltip v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val"></el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios'
export default {
  components: {},
  data() {
    return {
      userImg: require('../../assets/images/user-default.png'),
      tableData: [],
      tableLabel: {
        name: '会员名',
        amount: '消费金额',
        amountType: '消费方式',
        amountDate: '消费日期'
      }
    }
  },
  methods: {
    getTableData() {
      axios.get('http://127.0.0.1:8003/amount').then(res => {
        this.tableData = res.data
      })
    }
  },
  computed: {
    login() {
      return this.$store.state.user.login
    }
  },
  created() {
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/home';
</style>
